<template>
    <div>
        <!-- 标题栏 -->
    <van-nav-bar
      title="分类详情"
      left-text="返回"
      left-arrow
      fixed
      @click-left="onClickLeft"
    />
    <div class="content">
        <div class="photo" v-html="DataList">
            {{DataList}}
        </div>
        <div class="list">
            <p>专题推荐</p>
            <div class="item" v-for="item in recommendList" :key="item.id" >
                <img :src="item.scene_pic_url" alt="">
                <p>{{item.title}}</p>
            </div>
        </div>
    </div>
    </div>
</template>
<script>
import { detailaction } from "@/api/topic/index.js";
export default {
    data(){
        return{
            id:'',
            //获取图片
            DataList:[],
            //获取内容
            recommendList:[],
        }
    },
    methods:{
        getdetai(){
            detailaction({
                id:localStorage.getItem('Id')
            }).then(res=>{
                console.log(res)
                this.DataList=res.data.content;
                console.log(this.DataList)
                this.recommendList=res.recommendList;
            })
        },
        onClickLeft(){
            this.$router.go(-1);
        }
    },
    created(){
        this.getdetai();
    },
    
}
</script>
<style  scoped>
/* v-html 中如何更改样式 */
    .photo>>>img{
        display: block;
        width: 100%;
        height: auto;
    }
</style>
<style lang="scss" scoped>
.content{
    margin-top:48px;
    width: 100%;
    height: 2200px;
    background-color: #f4f4f4;
    .photo{
        width: 100%;
    }
    .list{
        width: 90%;
        margin: 10px auto;
        p{
            width: 90%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #999;
            font-size: 16px;
        }
        .item{
            width:95%;
            height: 240px;
            padding:10px;
            background-color: #fff;
            margin-bottom: 10px;
            img{
                width: 100%;
                height:160px;
            }
            p{
                font-size: 14px;
                line-height:30px;
                color: #000;
                text-align: left;
            }
        }
    }
}
</style>